<template>
  <el-pagination
    style="margin-top: 10px"
    background
    :pager-count="5"
    :current-page="currentPage"
    :page-sizes="pagesizes"
    :page-size="pagesize"
    :layout="layout[type]"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>
  export default {
    name: 'Pagination',
    props: {
      // eslint-disable-next-line vue/require-default-prop
      message: Number,
      // eslint-disable-next-line vue/require-default-prop
      type: Number
    },
    data() {
      return {
        // [10, 20, 50, 100]
        pagesizes: [5, 10, 20, 50, 100],
        pagesize: 10,
        currentPage: 1,
        layout: ['total, sizes, prev, pager, next, jumper', 'total, sizes, prev, pager, next'],
        total: 0
      }
    },
    watch: {
      message(n, o) {
        console.log('msg',this.message)
        this.total = this.message
        if ((this.currentPage - 1) * this.pagesize >= this.total && this.currentPage > 1) {
          this.currentPage -= 1
          this.$emit('func', [this.pagesize, this.currentPage])
        }
        // console.log('页码', this.currentPage)
        // console.log("new",n,"old",o)
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        console.log(this.pagesize, this.total)
        this.pagesize = val
        this.currentPage = 1
        this.$emit('func', [this.pagesize, this.currentPage])
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        console.log(this.currentPage)
        this.currentPage = val
        this.$emit('func', [this.pagesize, this.currentPage])
      }
    }
  }
</script>
  